<template>
  <!-- <div>8520</div> -->
  <a-breadcrumb>
    <a-breadcrumb-item>基础配置</a-breadcrumb-item>
    <a-breadcrumb-item>
      <router-link to="/base-manage/ranch-manage/index">牧场管理</router-link>
    </a-breadcrumb-item>
    <a-breadcrumb-item>查看牧场</a-breadcrumb-item>
  </a-breadcrumb>
  <div>
    <a-descriptions title="基本信息">
      <a-descriptions-item label="牧场名称">{{ ranchData.ranchName }}</a-descriptions-item>
      <a-descriptions-item label="场地规模">{{ ranchData.ranchScale }}㎡</a-descriptions-item>
      <a-descriptions-item label="养殖规模">{{ ranchData.ranchBreed }}</a-descriptions-item>
      <a-descriptions-item label="地址">{{ ranchData.ranchAddressDetail }}</a-descriptions-item>
      <a-descriptions-item label="养殖品种">{{ ranchData.itemName }}</a-descriptions-item>
    </a-descriptions>
  </div>
  <div class="map"><Map v-if="ranchData.ranchLatitude" :addObj="ranchData.value"></Map></div>
  <!-- {{ props.queryData }}   v-if="ranchData.value"-->
</template>

<script setup>
import RanchManage from '@/api/ranch';
import Map from './map.vue';
const ranchData = ref({});
const route = useRoute();
const { ranchId } = route.query;
const map = ref({});
// 查询牧场参数信息
const getQueryRecord = async () => {
  const res = await RanchManage.getRanch(ranchId);
  ranchData.value = res.data.data;
  // debugger;
  console.log(ranchData.value);
};
// 组件加载时获取数据
onMounted(() => {
  getQueryRecord();
});
//
// const handleMapSuccess = () => {
//   map.value.ranchLatitude = ranchData.value.ranchLatitude;
//   map.value.ranchLatitude = ranchData.value.ranchLongitude;
// };
</script>

<style scoped>
.map {
  width: 1220px;
  height: 400px;
  background-color: #f0f0f0;
}
</style>
